@charset "UTF-8";
/************************基础弹出层*************************/
.woddz_mask {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: none;
}

.woddz_mask * {
  box-sizing: border-box;
}

.woddz_mask .o5_mask {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 400px;
  min-height: 300px;
  width: 600px;
  height: 400px;
  max-width: 100%;
  max-height: 100%;
  background: white;
  border-radius: 5px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.woddz_mask .o5_mask [data-role="close"] {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  font-size: 0;
  line-height: 30px;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.woddz_mask .o5_mask [data-role="close"]:hover {
  background: #e7e7e7;
  color: #EB413D;
}

.woddz_mask .o5_mask [data-role="close"]::after {
  content: "×";
  font-size: 24px;
  line-height: 25px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.woddz_mask .o5_mask .title {
  background: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #878787;
  padding: 0 80px 0 20px;
  font-size: 13px;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.woddz_mask .o5_mask .content {
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

/************************扩展弹出层*************************/
.woddz_mask {
  /*成功提示层*/
  /*我的作品提示层*/
  /*商品规格选择提示层*/
  /*支付宝弹出层*/
  /*微信支付弹出层*/
  /*确认提示层*/
}

.woddz_mask .successful .content {
  bottom: 68px;
  padding: 38px 36px 10px;
}

.woddz_mask .successful .content img {
  display: block;
  margin: 0 auto;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.woddz_mask .successful .content p {
  margin-bottom: 50px;
  font-size: 20px;
  color: #454f58;
}

.woddz_mask .successful .content div {
  white-space: nowrap;
  margin-bottom: 10px;
}

.woddz_mask .successful .content div button {
  display: inline-block;
}

.woddz_mask .successful .content div button ~ button {
  margin-left: 16px;
  background-color: #ffffff;
  border: 1px solid #EB413D;
  color: #EB413D;
}

.woddz_mask .successful .works_share {
  border-top: 1px solid #efefef;
  text-align: center;
  font-size: 0;
  line-height: 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 36px;
}

.woddz_mask .successful .works_share * {
  display: inline-block;
}

.woddz_mask .successful .works_share span {
  font-size: 13px;
  margin-right: 20px;
  vertical-align: middle;
}

.woddz_mask .successful .works_share ul li {
  font-size: 13px;
  vertical-align: middle;
}

.woddz_mask .successful .works_share ul li ~ li:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: #e8e8e8;
  margin: 0 15px;
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}

.woddz_mask .successful .works_share ul li img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  margin-right: 5px;
}

.woddz_mask .myworks {
  width: 800px;
  height: 550px;
}

.woddz_mask .myworks .content {
  padding: 10px 36px;
}

.woddz_mask .myworks .content > p {
  text-align: left;
  font-size: 14px;
  color: #454f59;
  line-height: 1em;
  margin: 20px auto 10px;
}

.woddz_mask .myworks .content .zhanshi {
  margin: 0 auto;
}

.woddz_mask .myworks .content .zhanshi ul {
  width: 100%;
  font-size: 0;
}

.woddz_mask .myworks .content .zhanshi ul li {
  display: inline-block;
  width: 32.5%;
  height: 150px;
  margin-right: 1.25%;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  position: relative;
}

.woddz_mask .myworks .content .zhanshi ul li:nth-child(3n) {
  margin-right: 0;
}

.woddz_mask .myworks .content .zhanshi ul li:nth-child(n+4) {
  margin-top: 1.25%;
}

.woddz_mask .myworks .content .zhanshi ul li img {
  max-width: 80%;
  max-height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.woddz_mask .myworks .content .setform {
  margin: 10px auto 15px;
  font-size: 0;
  color: #454f58;
}

.woddz_mask .myworks .content .setform span {
  display: inline-block;
  margin-right: 1%;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  text-align: left;
}

.woddz_mask .myworks .content .setform input {
  min-width: 80%;
  font-size: 13px;
}

.woddz_mask .myworks .content button {
  font-size: 14px;
  display: block;
  margin: 0 auto 10px;
}

.woddz_mask .genre_mark {
  min-width: 540px;
  height: 420px;
}

.woddz_mask .payment {
  display: none;
  width: 500px;
  height: 300px;
}

.woddz_mask .payment .content p {
  font-size: 13px;
  color: #444f58;
  margin: 24px 0 32px;
}

.woddz_mask .payment .content .action #cancel {
  color: #878787;
  background-color: #efefef;
  border: 1px solid #cccccc;
}

.woddz_mask .payment .content .other_pay {
  margin-top: 36px;
  padding-top: 25px;
  text-align: left;
  border-top: 1px solid #efefef;
  font-size: 13px;
}

.woddz_mask .payment .content .other_pay a {
  color: #89a9e7;
  line-height: 1em;
}

.woddz_mask .payment .content .other_pay a:hover {
  color: #EB413D;
}

.woddz_mask .wechat_pay {
  display: none;
  width: 720px;
  height: auto;
  text-align: center;
}

.woddz_mask .wechat_pay .inner, .woddz_mask .wechat_pay .cover {
  width: 50%;
}

.woddz_mask .wechat_pay .inner {
  padding: 36px;
  background-color: #ffffff;
}

.woddz_mask .wechat_pay .inner > p, .woddz_mask .wechat_pay .inner div {
  margin: 0 20px;
}

.woddz_mask .wechat_pay .inner > p {
  font-size: 18px;
  line-height: 32px;
  color: #333333;
}

.woddz_mask .wechat_pay .inner > p em {
  color: #FF9E1D;
}

.woddz_mask .wechat_pay .inner div {
  border: 1px solid #E1E1E1;
  margin-top: 15px;
}

.woddz_mask .wechat_pay .inner div img {
  max-width: 100%;
  max-height: 246px;
  display: block;
}

.woddz_mask .wechat_pay .inner div p {
  font-size: 13px;
  line-height: 45px;
  color: #FF9E1D;
  background-color: #F7F7F7;
}

.woddz_mask .wechat_pay .cover {
  padding: 56px 36px;
  position: relative;
  background-color: #F7F7F7;
  height: 100%;
}

.woddz_mask .wechat_pay .cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-width: 0 0 454px 56px;
  border-style: solid;
  border-color: transparent transparent transparent #ffffff;
}

.woddz_mask .confirm {
  height: auto;
  min-height: 305px;
}

.woddz_mask .confirm .content {
  bottom: 68px;
  padding: 38px 36px 10px;
}

.woddz_mask .confirm .content p {
  margin-bottom: 50px;
  font-size: 20px;
  color: #454f58;
}

.woddz_mask .confirm .content div {
  white-space: nowrap;
  margin-bottom: 10px;
}

.woddz_mask .confirm .content div button {
  display: inline-block;
}

.woddz_mask .confirm .content div button ~ button {
  margin-left: 16px;
  background-color: #ffffff;
  border: 1px solid #EB413D;
  color: #EB413D;
}

.woddz_mask .show {
  display: block;
}

/*提示层*/
.tip {
  display: none;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 320px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 32px;
  border-radius: 5px;
  text-align: center;
}

.tip div {
  display: inline-block;
  text-align: left;
}

.woddz_mask12 {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  display: none;
}

.woddz_mask12 .o5_mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 820px;
  height: 658px;
  background: white;
  text-align: center;
  border-radius: 5px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.woddz_mask12 .o5_mask .title {
  width: 100%;
  height: 50px;
  background: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.woddz_mask12 .o5_mask .title p {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.woddz_mask12 .o5_mask .title p a {
  float: left;
  margin-left: 34px;
  color: #878787;
}

.woddz_mask12 .o5_mask .title p span {
  float: right;
  width: 16px;
  color: #878787;
  margin-right: 31px;
}

.woddz_mask12 .o5_mask .title p span:hover {
  width: 30px;
  height: 30px;
  background: #e7e7e7;
  border-radius: 50%;
  line-height: 30px;
  margin-top: 10px;
  -webkit-transform: translateX(7px);
  transform: translateX(7px);
  color: #EB413D;
  cursor: pointer;
}

.woddz_mask12 .o5_mask .gwlc4 {
  display: block;
  margin: 0 auto;
  width: 660px;
  height: 575px;
  margin-top: 27px;
  background: white;
  /*********下拉框公共样式*********/
  /******span样式*******/
}

.woddz_mask12 .o5_mask .gwlc4 .text_223 {
  margin-left: -80px;
}

.woddz_mask12 .o5_mask .gwlc4 .gwc {
  width: 329px;
  height: 60px;
  margin-left: 328px;
  padding-top: 66px;
}

.woddz_mask12 .o5_mask .gwlc4 .gwc img {
  margin-right: 35px;
}

.woddz_mask12 .o5_mask .gwlc4 .gwc h1 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: normal;
}

.woddz_mask12 .o5_mask .gwlc4 .gwc p {
  font-size: 14px;
}

.woddz_mask12 .o5_mask .gwlc4 .gwc p span {
  color: #EB413D;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 14px;
}

.woddz_mask12 .o5_mask .gwlc4 .select {
  width: 150px;
  height: 40px;
  float: left;
  margin: 0 17px 20px 0;
}

.woddz_mask12 .o5_mask .gwlc4 .select .xm_select {
  background: white;
}

.woddz_mask12 .o5_mask .gwlc4 .select .xm_select input {
  width: 110px;
  padding: 0;
  color: #444F58;
}

.woddz_mask12 .o5_mask .gwlc4 .select .xm_select input:disabled {
  background: #ffffff;
}

.woddz_mask12 .o5_mask .gwlc4 .select .xm_select a {
  width: 40px;
  margin-top: 0;
  color: #444f58;
  text-decoration: none;
}

.woddz_mask12 .o5_mask .gwlc4 .select ul {
  margin: 0;
}

.woddz_mask12 .o5_mask .gwlc4 .select ul li {
  margin: 0;
  background: white;
}

.woddz_mask12 .o5_mask .gwlc4 .select ul li:hover, .woddz_mask12 .o5_mask .gwlc4 .select ul li:active {
  background: #E7E7E7;
}

.woddz_mask12 .o5_mask .gwlc4 .first {
  width: 182px;
  margin-right: 17px;
}

.woddz_mask12 .o5_mask .gwlc4 .first .xm_select {
  width: 182px;
}

.woddz_mask12 .o5_mask .gwlc4 .first .xm_select input {
  width: 142px;
}

.woddz_mask12 .o5_mask .gwlc4 .first ul li {
  width: 182px;
}

.woddz_mask12 .o5_mask .gwlc4 .suozaidiqu {
  margin-right: 50px;
  height: 40px;
  line-height: 40px;
}

.woddz_mask12 .o5_mask .gwlc4 .xiangxixinxi {
  float: left;
  height: 40px;
  line-height: 40px;
  margin-right: 16px;
}

.woddz_mask12 .o5_mask .gwlc4 textarea {
  width: 486px;
  height: 53px;
  resize: none;
  padding: 15px;
  border-radius: 5px;
}

.woddz_mask12 .o5_mask .gwlc4 textarea::-webkit-input-placeholder {
  color: #99999a;
  font-size: 14px;
}

.woddz_mask12 .o5_mask .gwlc4 .tishi {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  color: #EB413D;
  margin-left: 90px;
  margin-bottom: 0px;
}

.woddz_mask12 .o5_mask .gwlc4 .youbian {
  line-height: 40px;
  height: 40px;
  margin-right: 57px;
}

.woddz_mask12 .o5_mask .gwlc4 .youdiquhao {
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  color: #EB413D;
  margin-left: 15px;
}

.woddz_mask12 .o5_mask .gwlc4 .shouhuo_text_138 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.woddz_mask12 .o5_mask .gwlc4 .shouhuo {
  margin-top: 20px;
  line-height: 40px;
  height: 40px;
  margin-right: 34px;
}

.woddz_mask12 .o5_mask .gwlc4 .shoujihaoma {
  margin-right: 57px;
  line-height: 40px;
  height: 40px;
}

.woddz_mask12 .o5_mask .gwlc4 .dianhuahaoma {
  margin-right: 57px;
  line-height: 40px;
  height: 40px;
}

.woddz_mask12 .o5_mask .gwlc4 .yizhi {
  width: 230px;
  margin-top: 15px;
  margin-bottom: 35px;
  color: #EB413D;
}

.woddz_mask12 .o5_mask .gwlc4 .btn_184 {
  margin-left: 113px;
}

.woddz_mask12 .o5_mask .gwlc4 .shouhuoright {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  margin-left: 20px;
  margin-right: 5px;
}

.woddz_mask12 .o5_mask .gwlc4 .changyong {
  color: #444F58;
}

.woddz_mask12 .o5_mask .gwlc4 .baifenbai {
  position: absolute;
  left: 650px;
  font-size: 16px;
  top: 200px;
  text-indent: 0;
  color: #99999A;
}

.woddz_mask12 .o5_mask .gwlc4 .baifenbai a {
  color: #99999A;
}
